<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item1">
				<view class="text"> <text>*</text>旧密码: </view>
				<view class="input">
					<input v-model="formData.oldPassword" password type="text" placeholder="请输入旧密码" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text>*</text>新密码: </view>
				<view class="input">
					<input v-model="formData.userPassword" password type="text" placeholder="请输入新密码" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text>*</text>确认密码: </view>
				<view class="input">
					<input v-model="formData.confirmPassword" password type="text" placeholder="请确认密码" />
				</view>
			</view>
		
		</view>
		<view class="footer_btn">
			<view @tap="navigateBack" class=""> 取消 </view>
			<view @tap="submit" class=""> 保存 </view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		mapState
	} from 'vuex'
	export default {
		onLoad(){
			this.formData.appUid = app.globalData.userInfo.uid
		},
		data() {
			return {
				formData: {
					userPassword:"",
					oldPassword:"",
					confirmPassword:"",
					appUid:""
				}
			}
		},
		methods: {
			
			navigateBack() {
				uni.navigateBack()
			},
			async submit() {
				console.log(this.formData);
				let {
					confirmPassword,
					oldPassword,
					userPassword,
					appUid
				} = this.formData
				if (!oldPassword) {
					uni.showToast({
						title: "请输入旧密码",
						icon: "none"
					})
					return
				}
				if (!userPassword) {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
					return
				}
				if (!confirmPassword) {
					uni.showToast({
						title: "请确认密码",
						icon: "none"
					})
					return
				}
				let formdata = {
					userPassword,
					oldPassword,
					confirmPassword,
					appUid
				}
				let data = await this.$api.updateUserPasswordApi(formdata)
				uni.showToast({
					title: data.message,
					icon: "none",
				})
				uni.$u.sleep(1500).then(() => {
					uni.navigateBack()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.addBtn {
		text-indent: 0;
		padding: 20rpx;
		background-color: red;
		color: #fff;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	.selected_box {
		flex: 1;
		align-items: center;
		display: flex;
		text-indent: 0;
		gap: 20rpx;
		flex-wrap: wrap;

		.selected_box_item {
			background-color: red;
			color: #fff;

			padding: 10rpx;
		}

		.not_selected_item {
			color: black;
			background-color: #f2f2f2;
			text-indent: 0;
			padding: 10rpx;
		}
	}

	page {
		background: #fff;
	}

	.input {
		display: flex;
		align-items: center;
		color: #000;
		flex: 1;

		input {
			height: 94rpx;
			background: #f2f2f2;
			border-radius: 47rpx;
			width: 100%;
		}
	}

	.newOrder {
		background: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;


			.form_item1 {
				color: #bdbdbd;
				margin-bottom: 36rpx;
				text-indent: 1em;

				.text {
					font-size: 0.875rem;
					margin-bottom: 20rpx;

					text {
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;
					color: #000;

					input {
						height: 94rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						width: 100%;
					}
				}
			}
		}

		.footer_btn {
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;

			view {
				background-image: url("/static/images/Registration/button.png");
				background-size: 280rpx 123rpx;
				color: #fff;
				width: 280rpx;
				height: 123rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 49rpx;
			}
		}
	}
</style>